<template>
	<view class="container">
		<view class="info">
			<view class="in-info">
				<span class="info-tag">卡卷名称</span>
				<view class="info-input name">
					<input class="info-input-name" type="text" v-model="couponName" placeholder="请输入卡卷名称" />
				</view>
			</view>
			<view class="in-info">
				<span class="info-tag">卡卷类型</span>
				<view class="info-input classs">
					<view class="mj" @click="selectType('mj')">
						<span>满减卷</span>
						<image class="choose-img"
							:src="chooseType === 'mj' ? '/static/card-management/组 6.png' : '/static/card-management/椭圆 3 拷贝.png'"
							mode=""></image>
					</view>
					<view class="dz" @click="selectType('dz')">
						<span>折扣卷</span>
						<image class="choose-img"
							:src="chooseType === 'dz' ? '/static/card-management/组 6.png' : '/static/card-management/椭圆 3 拷贝.png'"
							mode=""></image>
					</view>
				</view>
			</view>
			<view class="in-info">
				<span class="info-tag"></span>
				<view class="info-input">
					<view class="choose1" v-if="chooseType === 'mj'">
						满<input type="number" v-model="fullAmount" placeholder="0" />元减<input type="number" v-model="reduceAmount" placeholder="0" />元
					</view>
					<view class="choose2" v-if="chooseType === 'dz'">
						打<input type="number" v-model="discount" placeholder="0" step="0.1" min="1" max="9.5" />折
					</view>
				</view>
			</view>
			<view class="in-info">
				<span class="info-tag">发放时间</span>
				<view class="info-input">
					<picker mode="date" :value="startTime" @change="onStartTimeChange">
						<view class="picker-text">
							<text>{{ startTime || '请选择发放时间' }}</text>
							<image class="picker-arrow" src="/static/card-management/收起箭头小.png" mode="aspectFit">
							</image>
						</view>
					</picker>
				</view>
			</view>
			<view class="in-info">
				<span class="info-tag">发放结束时间</span>
				<view class="info-input">
					<picker mode="date" :value="endTime" @change="onEndTimeChange">
						<view class="picker-text">
							<text>{{ endTime || '请选择发放结束时间' }}</text>
							<image class="picker-arrow" src="/static/card-management/收起箭头小.png" mode="aspectFit">
							</image>
						</view>
					</picker>
				</view>
			</view>
			<view class="in-info">
				<span class="info-tag">投放数量</span>
				<view class="info-input toufang">
					<input type="number" v-model="totalCount" placeholder="100" />张
				</view>
			</view>
			<view class="in-info">
				<span class="info-tag">每人限领</span>
				<view class="info-input xianling">
					<text>1张</text>
				</view>
			</view>

		</view>
		<view class="btn" @click="submitForm">
			确认投放
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseType: 'mj', // 默认选择满减卷
				// 卡卷基本信息
				couponName: '', // 卡卷名称
				// 满减卷字段
				fullAmount: '', // 满多少元
				reduceAmount: '', // 减多少元
				// 折扣卷字段
				discount: '', // 折扣
				// 时间字段
				startTime: '', // 发放时间
				endTime: '', // 发放结束时间
				// 数量字段
				totalCount: '', // 投放数量
				limitCount: 1, // 每人限领固定为1
				// 验证错误信息
				errors: {}
			}
		},
		methods: {
			selectType(type) {
				this.chooseType = type;
			},
			// 发放时间选择
			onStartTimeChange(e) {
				this.startTime = e.detail.value;
			},
			// 发放结束时间选择
			onEndTimeChange(e) {
				this.endTime = e.detail.value;
			},

			// 表单验证
			validateForm() {
				this.errors = {};
				let isValid = true;
				
				// 验证卡卷名称
				if (!this.couponName.trim()) {
					this.errors.couponName = '请输入卡卷名称';
					isValid = false;
				}
				
				// 验证满减卷
				if (this.chooseType === 'mj') {
					const fullAmount = parseFloat(this.fullAmount);
					const reduceAmount = parseFloat(this.reduceAmount);
					
					if (!this.fullAmount || fullAmount <= 0) {
						this.errors.fullAmount = '请输入有效的满减金额';
						isValid = false;
					}
					if (!this.reduceAmount || reduceAmount <= 0) {
						this.errors.reduceAmount = '请输入有效的减免金额';
						isValid = false;
					}
					if (fullAmount > 0 && reduceAmount > 0 && fullAmount <= reduceAmount) {
						this.errors.fullAmount = '满减金额必须大于减免金额';
						isValid = false;
					}
				}
				
				// 验证折扣卷
				if (this.chooseType === 'dz') {
					const discount = parseFloat(this.discount);
					if (!this.discount || discount < 1 || discount > 9.5) {
						this.errors.discount = '折扣范围应在1-9.5之间';
						isValid = false;
					}
				}
				
				// 验证发放时间
				if (!this.startTime) {
					this.errors.startTime = '请选择发放时间';
					isValid = false;
				}
				if (!this.endTime) {
					this.errors.endTime = '请选择发放结束时间';
					isValid = false;
				}
				if (this.startTime && this.endTime && this.startTime >= this.endTime) {
					this.errors.endTime = '发放结束时间必须晚于开始时间';
					isValid = false;
				}
				
				
				// 验证投放数量
				const totalCount = parseInt(this.totalCount);
				if (!this.totalCount || totalCount <= 0) {
					this.errors.totalCount = '请输入有效的投放数量';
					isValid = false;
				}
				
				// 每人限领固定为1，无需验证
				
				return isValid;
			},
			// 提交表单
			submitForm() {
				if (this.validateForm()) {
					// 构建提交数据
					const formData = {
						couponName: this.couponName,
						couponType: this.chooseType,
						startTime: this.startTime,
						endTime: this.endTime,
						totalCount: parseInt(this.totalCount),
						limitCount: this.limitCount
					};
					
					// 根据卡卷类型添加对应字段
					if (this.chooseType === 'mj') {
						formData.fullAmount = parseFloat(this.fullAmount);
						formData.reduceAmount = parseFloat(this.reduceAmount);
					} else {
						formData.discount = parseFloat(this.discount);
					}
					
					console.log('提交数据:', formData);
					
					// 这里可以调用API提交数据
					uni.showToast({
						title: '卡卷创建成功',
						icon: 'success'
					});
					
					// 可以跳转到列表页面或重置表单
					// this.resetForm();
				} else {
					// 显示第一个错误信息
					const firstError = Object.values(this.errors)[0];
					uni.showToast({
						title: firstError,
						icon: 'none'
					});
				}
			},
			// 重置表单
			resetForm() {
				this.couponName = '';
				this.fullAmount = '';
				this.reduceAmount = '';
				this.discount = '';
				this.startTime = '';
				this.endTime = '';
				this.totalCount = '';
				this.limitCount = 1;
				this.errors = {};
			}
		}
	}
</script>

<style>
	.container {
		background: linear-gradient(to bottom, #3284fc 50%, #f5f5f5 50%);
		height: 40vh;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.info {
		margin: 30rpx auto 0;
		background: #fff;
		border-radius: 30rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.in-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		box-sizing: border-box;
	}

	.info-tag {
		font-size: 30rpx;
		font-weight: 600;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 240rpx;
		margin-right: 10rpx;
	}

	.info-input {
		font-size: 30rpx;
		width: calc(100% - 250rpx);
		padding: 10rpx;
		display: flex;
		align-items: center;
	}

	.choose-img {
		width: 35rpx;
		height: 35rpx;
		margin-left: 10rpx;
		margin-right: 50rpx;
	}

	.mj {
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 10rpx;
		border-radius: 10rpx;
		transition: background-color 0.3s;
	}

	.dz {
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 10rpx;
		border-radius: 10rpx;
		transition: background-color 0.3s;
	}

	.name {
		width: 55%;
		border-radius: 50rpx;
		border: 1px solid #e0e0e0;
	}

	.info-input-name {
		width: 100%;
		padding: 0 15rpx;
		font-size: 28rpx;
	}


	input {
		border: none;
		outline: none;
		background: transparent;
	}

	.choose1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.choose1 input {
		width: 100rpx;
		height: 50rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #000000;
		padding: 0 10rpx;
		text-align: center;
	}

	.choose2 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.choose2 input {
		width: 80rpx;
		height: 50rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #000000;
		padding: 0 10rpx;
		text-align: center;
	}



	.xianling input,
	.toufang input {
		width: 140rpx;
		height: 60rpx;
		border-radius: 50rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
		border: 1px solid #e0e0e0;
		margin-right: 10rpx;
		background: #fff;
	}




	.picker-text {
		border: 1px solid #e0e0e0;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #333;
		padding: 12rpx 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		background: #fff;
	}

	.picker-arrow {
		width: 25rpx;
		height: 25rpx;
		flex-shrink: 0;
		margin-left: 10rpx;
	}



	.picker-text:empty::before {
		content: '请选择时间';
		color: #999;
	}

	.btn {
		width: 70%;
		height: 80rpx;
		background: linear-gradient(to right, #3486fd, #0863e7);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}
</style>